<template>
  <div class="locumn_item">
    <div class="nav">
      <div>
        <img :src="data.img" alt="png" />
        <span>{{ data.name }}</span>
      </div>
      <div @click="handleMore(data.name)">更多></div>
    </div>
    <div class="music_item">
      <div v-for="(item, index) of (music.slice(0, 3))" :key="index">
        <div class="music_list">
          <div class="item_img">
            <img :src="item.coverImgUrl" alt="" />
          </div>
          <div class="music_title">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
    music: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleMore(val){
      console.log(val);
      var title=val;
      this.$router.push(`/MusicMore/${title}`);
    }
  },
};
</script>

<style scoped>
.locumn_item {
  padding: 30px;
  border-top: 1px solid #333;
  background-color: #fff;
}
.nav {
  display: flex;
  justify-content: space-between;
}
.music_item {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.music_list {
  width: 180px;
  height: 220px;
}
.item_img {
  width: 180px;
  height: 180px;
  margin: 5px auto;
}
.item_img img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.music_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>